<template>
<div class="page">
  <!-- nav -->
  <section class="nav">
    <header class="hidden-xs col-sm-12 col-md-12 col-lg-12 logo-pc">
      <img src="../../static/images/logo-pc.png" alt="人人交易网">
      <span id="object" class="stretchRight" style="display:inline-block;line-height:4rem;color:rgb(133, 133, 133);text-align:left;padding-left:1rem;">发现你的交易天赋</span>
      <!-- <span id="nav-pc" class="nav-pc" style="display:inline-block;line-height:4rem;color:rgb(133, 133, 133);text-align:right;"><span><router-link class="a" to="/" style="color:#ed1d24"><span class="a fa fa-home-o" aria-hidden="true"></span>首页&nbsp;&nbsp;&nbsp;</router-link></span><span><router-link class="a" to="/rank" style="display: none">盘手榜</router-link></span></span> -->
      <!-- <span id="nav-pc" class="nav-pc" style="display:inline-block;line-height:4rem;color:rgb(133, 133, 133);text-align:right;padding-right:1rem;">排行榜</span> -->
    </header>
    <header class="visible-xs h5-logo">
      <img src="../../static/images/logo_h5.png" alt="人人交易网">
      <br><br>
      <p id="object" class="pullDown" style="color:rgb(133, 133, 133);">发现你的交易天赋</p>
    </header>
  </section>
  <!-- banner -->
  <section class="banner">
    <div class="hidden-xs">
      <div class="">
        <img src="../../static/images/banner1_pc.png" alt="人人交易网">
      </div>
    </div>
    <div class="visible-xs">
      <img src="../../static/images/banner1_h5.png" alt="人人交易网">
    </div>
  </section>
  <section class="qr_h5 visible-xs col-xs-6">
    <img src="../../static/images/qr_h5_1.png" class="qrcode1" alt="人人交易网">
  </section>
  <section class="qr_h5 visible-xs col-xs-6">
    <img src="../../static/images/qr_h5_3.png" class="qrcode2" alt="人人交易网">
  </section>
  <section class="header-bar">
  </section>
  <section class="list">
    <header class="book hidden-xs col-xs-4 col-sm-2 col-md-1 col-lg-1">
      <!-- <p>我们的特色</p> -->
    </header>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    </div>
  </section>
  <br>
  <!-- con_h5 -->
  <section class="visible-xs product-list-h5">
    <div class="row">
      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/trade.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">创新赛事：</p>
          <p>人人可参与，月月拿分红</p>
          <p>优秀盘手零成本获利</p>
          <p>股市新手有计划成长</p>
        </div>
      </div>

      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/competition.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">交易竞技：</p>
          <p>多样化、多层级的赛事</p>
          <p>各路盘手显神通</p>
          <p>一键跟单，赢在股市</p>
        </div>
      </div>

      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/analysis.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">数据挖掘：</p>
          <p>提升交易技能</p>
          <p>优化交易系统</p>
          <p>优选盘手，职业进阶</p>
        </div>
      </div>

      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/trader.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">盘手榜单：</p>
          <p>多维度榜单</p>
          <p>丰富的盘手数据</p>
          <p>专业的操作分析</p>
        </div>
      </div>
    </div>
  </section>

  <!-- con_pc -->
  <section class="hidden-xs product-list">
    <div class="row">
      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/trade.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">创新赛事：</p>
          <p>人人可参与，月月拿分红</p>
          <p>优秀盘手零成本获利</p>
          <p>股市新手有计划成长</p>
        </div>
      </div>

      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/competition.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">交易竞技：</p>
          <p>多样化、多层级的赛事</p>
          <p>各路盘手显神通</p>
          <p>一键跟单，赢在股市</p>
        </div>
      </div>

      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/analysis.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">数据挖掘：</p>
          <p>提升交易技能</p>
          <p>优化交易系统</p>
          <p>优选盘手，职业进阶</p>
        </div>
      </div>

      <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="product-info-left">
          <img src="../../static/images/trader.png" alt="人人交易网">
        </div>
        <div class="product-info-right">
          <p class="stick-out">盘手榜单：</p>
          <p>多维度榜单</p>
          <p>丰富的盘手数据</p>
          <p>专业的操作分析</p>
        </div>
      </div>
    </div>
  </section>

  <!--foot-->
  <div class="foot text-center container">
      <!-- <div class="visible-xs col-md-12 col-xs-12"><img class="img-responsive container" src="../../static/images/home/logo_mc.png" alt=""></div>
      <div class="visible-xs info col-md-12 col-xs-12">
          <p>名传股份</p>
          <p>新三板挂牌公司</p>
          <p>股票代码：834657</p>
          <br>
      </div>
      <div class="hidden-xs col-md-12 col-xs-12 yb-pc"><img class="img-responsive container" style="width: 30%;" src="../../static/images/home/logo_mc_new.png" alt=""></div> -->

      <div class="hidden-xs foot-info col-md-12 col-xs-12">
          <p>邮箱: rrjiaoyi@rrjiaoyi.com</p>
      </div>


      <!-- <div class="col-md-1 visible-lg visible-md footLine"></div> -->
      <!-- <div class="col-md-5 col-xs-12">
          <p><a href=""><img src="../../static/images/home/footIcon1.png" alt=""></a></p>
          <p>上海（总部）  上海（分公司）   北京      深圳  </p>
          <p>上海市浦东新区浦东南路</p>
      </div>
      <div class="col-md-3 col-xs-12">
          <p><a href="tel:400-772-1689"><img src="../../static/images/home/footIcon2.png" alt=""></a></p>
          <p> 电话：021-123123123</p>
          <p>邮箱：info@rrjiaoyi.com</p>
      </div> -->
  </div>
  <div class="footBottom container">
      <div class="col-md-12 col-xs-12 text-center">Copyright © 2019 上海容徽信息科技有限公司</div>
      <div class="col-md-12 col-xs-12 text-center">沪ICP备17047024号</div>
      <div class="col-md-12 col-xs-12 text-center" style="display:none;">版本号v1.03</div>
  </div>

</div>
</template>

<script>
import $ from 'jquery';
// import data from '../data/data.json';
import {
  getBook1,
  getBook
} from '../api/api';

export default {
  data() {
    let bookList = [0];
    let bookInfo = [];
    return {
      bookList: bookList,
      bookInfo: bookInfo
    }
  },
  created() {
    // let speechSU = new window.SpeechSynthesisUtterance();
    // speechSU.text = 'hello,大家好 我是百合学姐。' +
    //   '1、了解中国股市潜规者，告诉你股市到底是个啥！牛市形成的原因。' +
    // '2、快速选股技巧，选股必知的三大技巧。' +
    //   '3、如何掌握最佳买点。' +
    // '4、炒股出货，何时才是最佳卖出时机。1. 历史上最伟大的赚钱秘密! 2. 激活布施公理的大秘密.3.通向财富的后门秘密.4.警惕:大陷阱.我的坦白.一个布施了 3 千万的伟人.什么是真正的布施，或，你是否有一个“精神等式”?.让我看看钱!.最伟大的精神疗法.像上帝一样思考.Leo Buscaglias 犯的大错误.“免费”值多少钱?.关于金钱的 47 个错误观念，以及如果消除它们.启发觉悟的电子邮件，或，如何实现你 自己伟大的 TUT 15. 布施带来 150 万.永不失效的定律.布施确实必致获得.布施与获得:没有人告诉过你的细节.如何获得你想要的.没有钱的时候如何布施.我用了 30 年的时间才认识到这个真理.布施和“交换”得来的被动式收入.';
    // // window.speechSynthesis.speak(speechSU);
    // let touchOne = () => setTimeout(function sss() {
    //   $('.qrcode2').attr('src', '../../static/images/qr_h5_3.png')
    // }, 50)
    // let touchTwo = () => setTimeout(function sss() {
    //   $('.qrcode1').attr('src', '../../static/images/qr_h5_1.png')
    // }, 50)
    // $(document)
    // .on('touchstart', '.qrcode1', function() {
    //   console.log('touchstart one');
    //   $('.qrcode2').attr('src', '../../static/images/qr_h5_1.png')
    //   touchOne()
    // })
    // .on('touchstart', '.qrcode2', function() {
    //   console.log('touchstart two');
    //   $('.qrcode1').attr('src', '../../static/images/qr_h5_3.png')
    //   touchTwo()
    // })
    // getBook1()
    // .then((response) => {
      // console.log('1111', response.data)
    // })
    // getGoods()
    //   .then(function (res) {
    //     console.log('sec');
    //     console.log(res.data);
    //   })
    //   .catch(function(error) {
    //     console.log('err');
    //     console.log(error);
    //   });
    // getBook(920132767134515200)
    //   .then(function (res) {
    //     console.log('sec');
    //     console.log(res.data);
    //   })
    //   .catch(function(error) {
    //     console.log('err');
    //     console.log(error);
    //   });
  },
  methods: {
    // clickBook() {
    //   this.$router.push('/book');
    // }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #ffffff;
  /*padding-bottom: 6rem;*/
}
// 导航
.nav-pc {
    margin-right: 5rem;
  .a {
    text-decoration:none;
  }
  .a:hover {
    color: #ed1d24;
  }
  // .fa:hover {
  //   color: #ed1d24;
  // }
  // a:visited {
  //   color: #2c3e50;
  // }
}
.nav {
    .logo-pc {
      padding-left: 5rem;
      display: flex;;
      span{
        flex: 1;
      }
    }
    background-color: white;
    margin: 2rem 8rem;
    // padding-left: 1rem;
    img {
        height: 4rem;
    }
    .h5-logo {
      img {
        height: 5rem;
      }
    }
}
.banner {
  background-color: #FBE0B5;
  img {
      width: 100%;
  }
}
.qr_h5 {
  padding: 0 0.5rem;
  img {
    width: 90%;
    margin: 4rem 0;
  }
}
.header-bar {
    background-color: #ed1d24;
    height: 10px;
}
.list {
    .book {
        margin: 2rem 8rem;
        margin-bottom: 0;
        p {
            // border-width: 0;
            color: #4D4D4D;
            border: 0;
            border-right: 1px;
            border-right-color: #ed1e24;
            border-style: solid;
        }
    }
}

.product-list {
    margin: 3rem 10rem;
    padding: 2rem;
    .product-info {
        // margin: 0 5px;
        padding: 1rem;
        display: flex;
        .product-info-left {
                flex: 1;
                img {
                  width: 35%;
                }
        }
        .product-info-right {
                text-align: left;
                flex: 1;
                p {
                  margin: 0;
                }
        }
        .book-border {
            padding: 2rem 0;
            border: 1px;
            border-color: #E6E6E6;
            border-style: solid;
        }
    }
    img {
        width: 50%;
    }
    p {
        margin: 1rem;
    }
    h6 {
        margin: 1rem;
        color: #808080;
    }
}
.product-list-h5 {
    margin: 3rem auto;
    padding: 2rem;
    .product-info {
        // margin: 0 5px;
        padding: 1rem;
        display: flex;
        .product-info-left {
                flex: 1;
                img {
                  width: 35%;
                }
        }
        .product-info-right {
                text-align: left;
                flex: 1;
                p {
                  margin: 0;
                }
        }
        .book-border {
            padding: 2rem 0;
            border: 1px;
            border-color: #E6E6E6;
            border-style: solid;
        }
    }
    img {
        width: 50%;
    }
    p {
        margin: 1rem;
    }
    h6 {
        margin: 1rem;
        color: #808080;
    }
}
.foot {
  .foot-info {
    padding: 2rem 20%;
  }
    .yb-pc {
      img {
        width: 50%;
      }
    }
    background-color: #f5f5f5;
    width: 100%;
    height: auto;
    padding: 2rem 8rem;
    // .footLine {
    //   border-left: 1px solid #808080;
    //   height: 11rem;
    // }
    img {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
    p {
      margin: 0 0 10px;
      color: #808080;
    }
}
.footBottom {
  background-color: #ed1d24;
  width: 100%;
  padding: 1rem;
  div {
    color: white;
  }
}
.stick-out {
  font-weight:bold;
}
</style>
